<script setup lang="ts">
import { reactive } from 'vue'
import type { PickerOption } from 'vant'
import xgForm from '../../components/Form.vue'
const form = reactive({
  select: '',
  area: '',
  date: ''
})
const formData = reactive({
  text: {
    label: '单行',
    type: 'number',
    placeholder: '单行输入',
    rules: [{ required: true, message: '请输入信息' }]
  },
  select: {
    label: '选择项',
    type: 'select',
    placeholder: '点击选择',
    showPicker: false,
    options: [
      { text: '广州', value: 'guangzhou'},
      { text: '佛山', value: 'foshan'},
      { text: '东莞', value: 'dongguan'}
    ] as PickerOption[],
    onConfirm ({ selectedOptions }: any ) {
      form.select = selectedOptions[0].text
    },
    rules: [{ required: true, message: '请选择' }]
  },
  area: {
    label: '地区',
    type: 'cascader',
    showPicker: false,
    options: [
      {
        text: '广东省',
        value: '330000',
        children: [{ 
          text: '广州市',
          value: '330100',
          children: [{ text: '白云区', value: '330100' }]
        }],
      },
      {
        text: '广西省',
        value: '320000',
        children: [{ 
          text: '河池市',
          value: '330100',
          children: [{ text: '大化市', value: '330100' }]
        }],
      },
    ],
    onFinish ({ selectedOptions }: any) {
      form.area = selectedOptions.map((option: any) => option.text).join('/');
      formData.area.showPicker = false
    }
  },
  date: {
    label: '日期选择',
    type: 'datePicker',
    showPicker: false,
    onConfirm ({ selectedValues }: any ) {
      form.date = selectedValues.join('/')
    },
    rules: [{ required: true, message: '请选择' }]
  },
  switch: {
    label: '开关',
    type: 'switch'
  },
  checkbox: {
    label: '复选框',
    type: 'checkbox',
    options: [
      { label: '选项一', name: 'one'},
      { label: '选项二', name: 'two'}
    ]
  },
  radio: {
    label: '单选',
    type: 'radio',
    options: [
      { label: '选项一', name: 'one'},
      { label: '选项二', name: 'two'}
    ]
  },
  upload: {
    label: '文件上传',
    type: 'upload',
    maxCount: 1,
    afterRead ({ file }: any) {
      console.log(file)
    }
  },
  rate: {
    label: '评分',
    type: 'rate',
    color: 'orange'
  }
})

function submit() {
  console.log(form)
}
</script>

<template>
  <xgForm ref="fromRef" :form-data="formData" :form="form" @submit="submit"></xgForm>
</template>

<style scoped>

</style>
